<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://at.alicdn.com/t/c/font_4544780_b0ddxilia9j.css"
    />
    <link rel="stylesheet" href="./index.css" />
    <!-- 750px 170px -->
    <!-- 版心  710px -->
  </head>
  <body>
    <div class="container">
      <!-- 头部 -->
      <div class="header">
        <div>
          <div class="header_left">
            <span class="iconfont icon-zuobiao"></span>
            <span>静林湾</span>
            <span class="iconfont icon-you"></span>
          </div>
          <div class="header_right">
            <span>晴</span><span class="iconfont icon-taiyang-"></span
            ><span class="iconfont icon-xiaoxi"></span>
          </div>
        </div>
      </div>
      <div class="header_search">
        <div>
          <span class="iconfont icon-sousuo1"></span>
          <input type="text" placeholder="快餐" />
        </div>
      </div>
      <!-- 轮播图 -->
      <div class="Carousel_chart">
        <img src="./img/轮播.png" />
      </div>
      <!-- 导航栏 -->
      <div class="nav">
        <div>
          <img src="./img/折扣.png" />
        </div>
        <div>
          <div>
            <img src="./img/1.gif" />
            <p>美食</p>
          </div>
          <div>
            <img src="./img/2.gif" />
            <p>超市便利</p>
          </div>
          <div>
            <img src="./img/3.gif" />
            <p>蔬菜水果</p>
          </div>
          <div>
            <img src="./img/4.gif" />
            <p>美团专送</p>
          </div>
          <div>
            <img src="./img/5.gif" />
            <p>跑腿代购</p>
          </div>
          <div>
            <img src="./img/6.gif" />
            <p>午餐优选</p>
          </div>
          <div>
            <img src="./img/7.gif" />
            <p>甜点饮品</p>
          </div>
          <div>
            <img src="./img/8.gif" />
            <p>全城甄选</p>
          </div>
          <div>
            <img src="./img/9.gif" />
            <p>送药上门</p>
          </div>
          <div>
            <img src="./img/10.png" />
            <p>减免配送费</p>
          </div>
        </div>
        <div>
          <span class="hover"></span>
          <span></span>
        </div>
      </div>
      <!-- 优惠专区 -->
      <div class="Discount_Zone">
        <div>
          <p>优惠专区</p>
          <img src="./img/购物车.png" />
        </div>
        <div>
          <img src="./img/03.png" />
          <img src="./img/05.png" />
        </div>
        <div>
          <img src="./img/首页_03.png" />
          <img src="./img/首页_05.png" />
          <img src="./img/首页_07.png" />
          <img src="./img/首页_09.png" />
        </div>
      </div>
      <!-- 推荐 -->
      <div class="recommendation">
        <div>
          <p>为你优选</p>
          <span>更多<span class="iconfont icon-you"></span></span>
        </div>
        <div>
          <div>
            <img src="./img/商品.png" />
            <p>包子粥铺中的点评人气餐厅</p>
          </div>
          <div>
            <img src="./img/商品.png" />
            <p>包子粥铺中的点评人气餐厅</p>
          </div>
          <div>
            <img src="./img/商品.png" />
            <p>包子粥铺中的点评人气餐厅</p>
          </div>
          <div>
            <img src="./img/商品.png" />
            <p>包子粥铺中的点评人气餐厅</p>
          </div>
        </div>
      </div>
      <!-- 底部 -->
      <div class="footer">
        <div><span class="iconfont icon-11 hover"></span><span>首页</span></div>
        <div><span class="iconfont icon-dingdan"></span><span>订单</span></div>
        <div>
          <span class="iconfont icon-changjinglu"></span><span>我的</span>
        </div>
      </div>
    </div>
  </body>
</html>
